<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="list">
      <uv-cell-group :border="false">
        <uv-cell title="头像" center isLink titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF' @click="chooseImage">
          <template v-slot:value>
            <view class="avatar">
              <image :src="setUrl(userInfo.avatar)" mode="aspectFill" class="img"></image>
            </view>
          </template>
        </uv-cell>
      </uv-cell-group>
    </view>
    <view class="list">
      <view class="item" @click="goPage('/pages/mine/edit-name')">
        <view class="left">
          <view class="title">昵称</view>
        </view>
        <view class="right">
          <view class="desc">{{ userInfo.nickname }}</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <uv-line hairline></uv-line>
      <view class="item alone">
        <view class="left">
          <view class="title">个人简介</view>
        </view>
        <view class="test">
          <uv-textarea v-model="userInfo.bio" placeholder="请输入内容" border='none' height='200rpx' :customStyle="{padding: 0}" @blur='setUser'></uv-textarea>
        </view>
      </view>
      <uv-line hairline></uv-line>
      <view class="item" @click="goPage('/pages/mine/verify')">
        <view class="left">
          <view class="title">已绑定手机号</view>
        </view>
        <view class="right">
          <view class="desc">{{ setPhone(userInfo.mobile) }}</view>
          <view class="red">换绑</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <uv-line hairline></uv-line>
      <view class="item" @click="login('qq')">
        <view class="left">
          <view class="icon">
            <image src="/static/qq-icon.png" class="img"></image>
          </view>
          <view class="title">QQ</view>
        </view>
        <view class="right">
          <view class="desc" v-if="userInfo.qq_info">已绑定</view>
          <view class="desc" v-else>未绑定</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <view class="item" @click="login('weixin')">
        <view class="left">
          <view class="icon">
            <image src="/static/wx-icon.png" class="img"></image>
          </view>
          <view class="title">微信</view>
        </view>
        <view class="right">
          <view class="desc" v-if="userInfo.wechat_info">已绑定</view>
          <view class="desc" v-else>未绑定</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <view class="item" @click="login('sinaweibo')">
        <view class="left">
          <view class="icon">
            <image src="/static/weibo-icon.png" class="img"></image>
          </view>
          <view class="title">微博</view>
        </view>
        <view class="right">
          <view class="desc" v-if="userInfo.sina_info">已绑定</view>
          <view class="desc" v-else>未绑定</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <uv-line hairline></uv-line>
      <view class="item" @click="goAuto">
        <view class="left">
          <view class="title">实名认证</view>
        </view>
        <view class="right">
          <view class="desc" v-if="userInfo.is_real_auth == 0">未实名</view>
          <view class="desc" v-if="userInfo.is_real_auth == 1">已认证</view>
          <uv-icon name="arrow-right" size='24rpx' color="#000000"></uv-icon>
        </view>
      </view>
      <uv-line hairline></uv-line>
    </view>
    <action ref="actionPhoto" :size="{ width: 200, height: 200 }" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUser, useOrder } from '@/store';
import { choose, toast, getUser, setUrl, checkServe } from '@/common';
import { post } from '@/api';

const actionPhoto = ref(null);
const userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});

function chooseImage(){
  actionPhoto.value.open();
}
function getImageUrl(url){
  userInfo.value.avatar = url;
  setUser();
}
function confirm(){
  // 跳转到应用设置页
  gotoAppPermissionSetting();
}
function setUser(){
  const params = {
    nickname: userInfo.value.nickname,
    avatar: userInfo.value.avatar,
    bio: userInfo.value.bio
  }
  post('api/user/profile', params).then(res => {
    if(res.code == 1){
      toast('修改成功');
      getUser();
    }
  })
}
function goAuto(){
  if(userInfo.value.is_real_auth == 1) return;
  uni.navigateTo({
    url: '/pages/mine/cert/index'
  });
}
function bindUserThird(type, access_token, openid, unionid, nickname, avatar){
  const params = {
    type,
    access_token,
    openid,
    unionid,
    nickname,
    avatar
  }
  console.log(params);
  post('api/user_third/bindUserThird', params).then(res => {
    if(res.code == 1){
      toast('绑定成功');
      setTimeout(() => {
        getUser();
      }, 1000)
    }
  })
}
function setPhone(value){
  return value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}
function login(value){
  // if(value == 'sinaweibo') return toast('开发中...');
  if(value == 'sinaweibo') return toast('开发中...');
  if(value == 'weixin' && userInfo.value.wechat_info != null) return;
  if(value == 'qq' && userInfo.value.qq_info != null) return;
  if(value == 'sinaweibo' && userInfo.value.sina_info != null) return;
  function setLogin(){
    uni.login({
      provider: value, //使用微信登录
      onlyAuthorize: false,
      success: function (loginRes) {
        uni.getUserInfo({
          provider: value,
          success: function (infoRes) {
            const { access_token, openid } = loginRes.authResult;
            const { nickName, avatarUrl } = infoRes.userInfo;
            const type = {
              'weixin': '1',
              'qq': '2'
            }
            const uniId = infoRes.userInfo.unionid ? infoRes.userInfo.unionid : infoRes.userInfo.unionId;
            bindUserThird(type[value], access_token, openid, uniId, nickName, avatarUrl);
          },
          fail(err) {
            uni.showModal({
            	title: '提示',
            	content: err,
            	success: function (res) {
            		if (res.confirm) {
            			console.log('用户点击确定');
            		} else if (res.cancel) {
            			console.log('用户点击取消');
            		}
            	}
            });
          }
        });
      },
      fail(err) {
        uni.showModal({
        	title: '提示',
        	content: err,
        	success: function (res) {
        		if (res.confirm) {
        			console.log('用户点击确定');
        		} else if (res.cancel) {
        			console.log('用户点击取消');
        		}
        	}
        });
      }
    });
  }
  checkServe('oauth', value, setLogin)
}
function goPage(url){
  uni.navigateTo({
    url: url
  });
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    background-color: #fff;
    .item{
      width: 100%;
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.alone{
        display: block;
      }
      .test{
        padding-top: 30rpx;
      }
      .right{
        display: flex;
        align-items: center;
        .desc{
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(0, 0, 0, .4);
          padding-right: 22rpx;
        }
        .red{
          font-weight: 400;
          font-size: 28rpx;
          color: #E43222;
          padding-right: 22rpx;
        }
      }
      .left{
        display: flex;
        align-items: center;
        .icon{
          width: 72rpx;
          height: 72rpx;
          margin-right: 30rpx;
        }
        .title{
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }
      }
    }
    .avatar{
      width: 70rpx;
      height: 70rpx;
      overflow: hidden;
      border-radius: 50%;
    }
    :deep(.uv-cell-group){
      .uv-cell__body.uv-cell--center{
        padding: 20rpx 0;
        .uv-cell__left-icon-wrap{
          display: none;
        }
      }
    }
    :deep(.uv-cell__value){
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F5F5F5;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
  }
</style>